<template>
  <el-card class="article-card" shadow="hover" @click="handleClick">
    <div class="article-image" v-if="coverSrc">
      <img :src="coverSrc" :alt="title">
    </div>
    <div class="article-content">
      <h3 class="article-title">{{ title }}</h3>
      <div class="article-meta" v-if="showMeta">
        <span class="category" v-if="category">{{ category }}</span>
        <span class="date" v-if="date">{{ formatDate(date) }}</span>
      </div>
      <p class="article-summary" v-if="summary">{{ summary }}</p>
      <div class="article-actions">
        <slot name="actions">
          <el-button type="primary" size="small" @click.stop="handleView">查看详情</el-button>
        </slot>
      </div>
    </div>
  </el-card>
</template>

<script>
import { formatDate } from '@/utils/helper';

export default {
  name: 'ArticleCard',
  props: {
    id: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    summary: {
      type: String,
      default: ''
    },
    cover: {
      type: String,
      default: ''
    },
    date: {
      type: String,
      default: ''
    },
    category: {
      type: String,
      default: ''
    },
    showMeta: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'news', // news, product, box, recruit
      validator: value => ['news', 'product', 'box', 'recruit'].includes(value)
    }
  },
  computed: {
    coverSrc() {
      return this.cover || require('@/assets/images/news/news-placeholder.jpg');
    }
  },
  methods: {
    formatDate,
    handleView() {
      this.$emit('view', this.id);
      
      // 根据不同类型导航到不同的详情页
      const routes = {
        news: `/news/${this.id}`,
        product: `/product/${this.id}`,
        box: `/boxs/${this.id}`,
        recruit: `/recruits/${this.id}`
      };
      
      this.$router.push(routes[this.type]);
    },
    handleClick() {
      this.$emit('click', this.id);
    }
  }
}
</script>

<style lang="scss" scoped>
.article-card {
  cursor: pointer;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  }
  
  .article-image {
    height: 180px;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
      
      &:hover {
        transform: scale(1.05);
      }
    }
  }
  
  .article-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    
    .article-title {
      margin: 0 0 12px 0;
      font-size: 18px;
      font-weight: bold;
      color: #333;
      // 多行文本溢出省略号
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .article-meta {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
      font-size: 14px;
      color: #999;
      
      .category {
        background-color: #f0f9ff;
        color: #409eff;
        padding: 2px 8px;
        border-radius: 2px;
      }
      
      .date {
        color: #999;
      }
    }
    
    .article-summary {
      flex: 1;
      margin-bottom: 16px;
      font-size: 14px;
      color: #666;
      line-height: 1.5;
      // 多行文本溢出省略号
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .article-actions {
      margin-top: auto;
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .article-card {
    .article-image {
      height: 140px;
    }
    
    .article-content {
      .article-title {
        font-size: 16px;
      }
      
      .article-summary {
        -webkit-line-clamp: 2;
      }
    }
  }
}
</style> 